<template>
  <div>
    <div class="demo-inner-divider">基本</div>
    <div class="date-picker">
      <div>
        <p>选择日期</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          style="width: 200px"
        ></e-date-picker>
      </div>
      <div>
        <p>选择日期段</p>
        <e-date-picker
          type="daterange"
          placeholder="Select date"
          placement="bottom-end"
          style="width: 200px"
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">快捷方式</div>
    <div class="date-picker">
      <div>
        <p>自定义1</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          :options="options1"
          style="width: 200px"
        ></e-date-picker>
      </div>
      <div>
        <p>自定义2</p>
        <e-date-picker
          type="daterange"
          placeholder="Select date"
          :options="options2"
          placement="bottom-end"
          style="width: 200px"
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">面板不联动 多选</div>
    <div class="date-picker">
      <div>
        <p>面板不联动</p>
        <e-date-picker
          type="daterange"
          placeholder="Select date"
          style="width: 200px"
          split-panels
        ></e-date-picker>
      </div>
      <div>
        <p>多选</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          style="width: 200px"
          multiple
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">日期</div>
    <div class="date-picker">
      <div>
        <p>起始日期</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          style="width: 200px"
          :start-date="new Date(1991, 3, 12)"
        ></e-date-picker>
        <e-date-picker
          type="daterange"
          placeholder="Select date"
          placement="bottom-end"
          style="width: 200px"
          :start-date="new Date(1991, 3, 12)"
        ></e-date-picker>
      </div>
      <div>
        <p>日期格式</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          style="width: 200px"
          :model-value="value1"
          format="yyyy年MM月dd日"
        ></e-date-picker>
        <e-date-picker
          type="daterange"
          placeholder="Select date"
          placement="bottom-end"
          style="width: 200px"
          :model-value="value2"
          format="yyyy/MM/dd"
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">禁用</div>
    <div class="date-picker">
      <div>
        <p>不可选日期</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          style="width: 200px"
          :options="disableOptions1"
        ></e-date-picker>
      </div>
      <div>
        <p>禁用每个月15号</p>
        <e-date-picker
          type="date"
          placeholder="Select date"
          style="width: 200px"
          :options="disableOptions2"
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">年和月</div>
    <div class="date-picker">
      <div>
        <p>年</p>
        <e-date-picker
          type="year"
          placeholder="Select Year"
          style="width: 200px"
        ></e-date-picker>
      </div>
      <div>
        <p>月</p>
        <e-date-picker
          type="month"
          placeholder="Select Month"
          style="width: 200px"
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">确认</div>
    <div class="date-picker">
      <div>
        <p>日期</p>
        <e-date-picker
          type="date"
          placeholder="Select Date"
          style="width: 200px"
          confirm
        ></e-date-picker>
      </div>
      <div>
        <p>日期段</p>
        <e-date-picker
          type="daterange"
          placeholder="Select Date"
          style="width: 200px"
          confirm
        ></e-date-picker>
      </div>
    </div>
    <div class="demo-inner-divider">尺寸</div>
    <div class="date-picker">
      <div>
        <p>small</p>
        <e-date-picker
          type="date"
          size="small"
          placeholder="Select Date"
        ></e-date-picker>
      </div>
      <div>
        <p>middle</p>
        <e-date-picker type="date" placeholder="Select Date"></e-date-picker>
      </div>
      <div>
        <p>large</p>
        <e-date-picker
          type="date"
          size="large"
          placeholder="Select Date"
        ></e-date-picker>
      </div>
    </div>
    <date-picker-md class="markdown-body"></date-picker-md>
  </div>
</template>
<script>
import datePickerMd from '../../docs/datePicker.md'
export default {
  name: 'DemoDatePicker',
  components: {
    datePickerMd,
  },
  data() {
    return {
      options1: {
        shortcuts: [
          {
            text: '今天',
            value() {
              return new Date()
            },
            onClick: () => {
              console.log('click today')
            },
          },
          {
            text: '昨天',
            value() {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              return date
            },
            onClick: (picker) => {
              console.log('Click yesterday')
            },
          },
          {
            text: '一周前',
            value() {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              return date
            },
            onClick: (picker) => {
              console.log('Click a week ago')
            },
          },
        ],
      },
      options2: {
        shortcuts: [
          {
            text: '1 week',
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            },
          },
          {
            text: '1 month',
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          {
            text: '3 months',
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            },
          },
        ],
      },
      value1: '2016-01-01',
      value2: ['2016-01-01', '2016-02-15'],
      disableOptions1: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000
        },
      },
      disableOptions2: {
        disabledDate(date) {
          const disabeldDay = date.getDate()
          return disabeldDay === 15
        },
      },
    }
  },
}
</script>
<style scoped>
.date-picker {
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.date-picker > div {
  margin-right: 50px;
}
.date-picker p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  margin-bottom: 10px;
}
</style>
